<template>
  <div class="lifeCard_item" @click="lifeClick">
    <div class="index_item flex-top">
      <div
        class="indexItemIcon"
        :class="[`${'g-' + this.lifeItemIndexType}`]"
      ></div>
      <div class="item_title">
        <h4>{{ lifeData.name }}</h4>
        <h5>{{ lifeData.category }}</h5>
      </div>
      <van-icon name="play-circle" size="0.18rem" color="#666" />
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  name: "LifeCard",
  data() {
    return {};
  },
  props: {
    lifeData: Object,
    lifeItemIndexType: String,
  },
  methods: {
    ...mapMutations(["itemLifeIndexData", "popupFn"]),
    lifeClick() {
      this.popupFn(true);
      this.itemLifeIndexData(this.lifeItemIndexType);
    },
  },
};
</script>

<style scoped>
.lifeCard_item {
  flex: 1 0 100%;
  width: 100%;
  height: auto;
  margin-bottom: 0.08rem;
}
.lifeCard_item .index_item {
  padding: 0.16rem 0.15rem;
  border-radius: 0.16rem;
  background-color: rgba(255, 255, 255, 0.9);
}

.item_title {
  flex: 1 0 auto;
}
.item_title h4 {
  font-size: 0.17rem;
}
.item_title h5 {
  font-size: 0.14rem;
  color: #969799;
}
</style>